<template>
	<!-- 系统设置 -->
	<view class="flex-col page">
		<!-- <view class="back-w" style="">
			<view class="u-m-l-10" @click="Back()">
				<u-icon name="arrow-left" color="#000000" size="20"></u-icon>
			</view>
			<view class="f-w-l">
				系统设置
			</view>
		</view> -->
		<view class="flex-col group">
			<view class="flex-col">
				<view class="flex-col section_3">
					<view class="justify-between group_2" @click="secerity(0)">
						<text class="text_7">账号与安全</text>
						<!-- <image :src="$IMG_URL+'index/goright.png'" class="image_2 image_3" /> -->
						<view class="f-p">
							<u-icon name="arrow-right" color="#BFBFBF" size="16"></u-icon>
						</view>
					</view>
					<image :src="$IMG_URL+'16557836384872241555.png'" class="image_4" />
					<view class="justify-between group_2" @click="secerity(1)">
						<text class="text_7">意见反馈</text>
						<view class="f-p">
							<u-icon name="arrow-right" color="#BFBFBF" size="16"></u-icon>
						</view>
					</view>
					<image :src="$IMG_URL+'16557836384872241555.png'" class="image_4" />
					<view class="justify-between group_2" @click="secerity(2)">
						<text class="text_7">关于我们</text>
						<view class="f-p">
							<u-icon name="arrow-right" color="#BFBFBF" size="16"></u-icon>
						</view>
					</view>
					<image :src="$IMG_URL+'16557836384872241555.png'" class="image_4" />
					<view class="justify-between group_2" @click="secerity(3)">
						<text class="text_7">用户注册协议</text>
						<view class="f-p">
							<u-icon name="arrow-right" color="#BFBFBF" size="16"></u-icon>
						</view>
					</view>
					<image :src="$IMG_URL+'16557836384872241555.png'" class="image_4" />
					<view class="justify-between group_2" @click="secerity(4)">
						<text class="text_7">隐私政策</text>
						<view class="f-p">
							<u-icon name="arrow-right" color="#BFBFBF" size="16"></u-icon>
						</view>
					</view>
				</view>
				<view class="flex-col section_4">
					<view class="justify-between group_2" @click="clearStorage">
						<text class="text_7">清除缓存</text>
						<view class="flex-row group_6">
							<text class="text_8">{{cacheSize}}M</text>
							<view class="f-p">
								<u-icon name="arrow-right" color="#BFBFBF" size="16"></u-icon>
							</view>
						</view>
					</view>
					<image :src="$IMG_URL+'16557836384872241555.png'" class="image_4" />
					<view class="justify-between group_2">
						<text class="text_7">检查更新</text>
						<view class="flex-row group_8">
							<text class="text_10">{{version}}</text>
							<view class="f-p">
								<u-icon name="arrow-right" color="#BFBFBF" size="16"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="flex-col items-center button"><text class="text_11" @click="goLogout">退出登录</text></view>
			<u-modal :show="show" title="提示"  :showCancelButton="true" @confirm="confirm"  @cancel="show=false">
				<view class="w-full u-flex u-row-center">
					<text class="tip">退出当前账号?</text>
				</view>
			</u-modal>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		components: {},
		data() {
			return {
				version:'1.0.0',
				cacheSize: '3.4',
				title:'是否确认退出!',
				show:false
			};
		},
		onLoad() {
			// #ifdef APP-PLUS
			plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
				this.version = wgtinfo.version
			})
			// #endif
			console.log(this.version);
		},
		methods: {
			...mapActions(['logout']),
			goLogout() {
				this.show=true;
			// 	uni.showModal({
			// 		title: '提示',
			// 		// 提示文字
			// 		content: '确认退出吗？',
			// 		// 取消按钮的文字自定义
			// 		cancelText: "取消",
			// 		// 确认按钮的文字自定义
			// 		confirmText: "确定",
			// 		//删除字体的颜色
			// 		confirmColor: '#000000',
			// 		//取消字体的颜色
			// 		cancelColor: '#000000',
			// 		success: res => {
			// 			if (res.confirm) {
			// 				this.logout();
			// 			} else {
			// 				// 执行取消后的操作
			// 			}
			// 		}
			
			
			// 	})
			},
			confirm()
			{
					this.logout();
			},
			clearStorage() {
				// #ifdef APP-PLUS
				let self = this;
				uni.showModal({
					title: '提示',
					content: '确定清除本地缓存吗？',
					success: function(res) {
						if (res.confirm) {
							plus.cache.clear(res => {
								uni.showToast({
									title: '清除成功！',
									icon: 'none',
									success() {
										self.cacheSize = '0';
									}
								});
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

				// #endif
				// #ifndef APP-PLUS
				this.cacheSize = 0;
				// #endif 
			},
			Back() {
				let pageNum = 2
				let pages = getCurrentPages(); // 当前页面
				let beforePage = pages[pages.length - pageNum];
				uni.navigateBack({
					success: function() {
						console.log(beforePage)
						beforePage.$vm.$refs.mine.getinfo();
					}

				})
			},
			onPullDownRefresh() {
				this.getlist()
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			secerity(index) {
				if (index == 0) {
					uni.navigateTo({
						url: 'pages/common/security/security'
					})
				} else if (index == 1) {
					uni.navigateTo({
						url: 'pages/onSite/mine/feedback/feedback'
					})
				} else if (index == 2) {
					uni.navigateTo({
						url: 'pages/common/about/about'
					})
				} else if (index == 3) {
					uni.navigateTo({
						url: `pages/common/guide/guide?identification=${3}`
					})
				} else if (index == 4) {
					uni.navigateTo({
						url:`pages/common/guide/guide?identification=${4}`
					})
				}

			},
			checkVersion() {
				this.$u.toast('已是最新版本~');
			},
		},
	};
</script>

<style scoped lang="scss">
	.back-w {
		display: flex;
		flex-direction: row;
		padding-top: 50rpx;
		/* align-items: center; */
		width: 100vw;
		height: 90rpx;
		background-color: #ffffff;
	}
     .tip{
		 font-weight: 700;
	 }
	.f-w-l {
		display: flex;
		flex-direction: row;
		font-weight: bold;
		margin-left: 33%;
	}

	.image_4 {
		width: 91.4667vw;
		height: 0.2667vw;
	}

	.group_3 {
		padding: 28rpx 0 40rpx;
	}

	.image_2 {
		width: 14rpx;
		height: 26rpx;
	}

	.text_2 {
		font-weight: 500;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.image_6 {
		margin-top: 13rpx;
	}

	.page {
		background-color: #f6f7f9;
		width: 100vw;
		height: 100vh;
	}

	.group {
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.button {
		// height: 100%;
		width: 100%;
		position: fixed;
		bottom: 0;
		// margin-top: 700px;
		font-weight: 800;
	   left:0;
	   right:0;
		background-color: #ffffff;
		
		height: 100rpx;
		line-height: 100rpx;
	}

	.section_3 {
		padding-left: 32rpx;
		padding-right: 31.5rpx;
		background-color: #ffffffff;
	}

	.section_4 {
		margin-top: 20rpx;
		padding: 0 32rpx;
		background-color: #ffffffff;
	}

	.text_11 {
		color: #1d6aff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		
	}

	.group_2 {
		padding: 32rpx 0 ;
	}

	.group_4 {
		padding: 27.5rpx 0 40.5rpx;
	}

	.group_5 {
		padding: 29rpx 0 35rpx;
	}

	.group_7 {
		padding: 28rpx 0 38rpx;
	}

	.text_1 {
		font-weight: 500;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.image_3 {
		margin-top: 13rpx;
	}

	.text_6 {
		font-weight: 500;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.image_13 {
		margin-top: 13rpx;
	}

	.text_7 {
		
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
	
	}

	.group_6 {
		margin-top: 11rpx;
	}

	.text_9 {
		font-weight: 500;
		margin-bottom: 4rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.group_8 {
		margin-top: 9rpx;
	}

	.text_8 {
		margin-right: 24rpx;
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_14 {
		margin-left: 22rpx;
		margin-bottom: 5rpx;
		flex-shrink: 0;
	}

	.text_10 {
		margin-right: 24rpx;
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_16 {
		margin: 3rpx 0 4rpx 22rpx;
		flex-shrink: 0;
	}
</style>
